<%- include('../layout/header') %>
<!-- 主体内容 -->
<div class="content">
    <h2>图书列表 <a class="btn btn-primary btn-xs" href="/book/create">添加书籍</a></h2>
    <div class="clearfix"></div>
    <hr>
    <div class="form">
        <div class="col-xs-3 col-xs-offset-9">
            <form action="/book" method="get">
                <div class="input-group">
                    <input type="text" name="keyword" value="<%= keyword %>" class="form-control" placeholder="输入您的关键字">
                    <span class="input-group-btn">
                    <button class="btn btn-default">搜索</button>
                    </span>
                </div><!-- /input-group -->
            </form>
        </div>
    </div>
    <div class="clearfix"></div>
    <hr>
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
            <th>ID</th>
            <th>书名</th>
            <th>作者</th>
            <th>价格</th>
            <th>封面</th>
            <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <% for(let i=0;i<data.length;i++){ %>
            <tr>
                <th scope="row"><%= data[i]._id %></th>
                <td><%= data[i].name %></td>
                <td><%= data[i].author %></td>
                <td><%= data[i].price %></td>
                <td><img width="40" src="<%= data[i].img %>" alt=""></td>
                <td>
                    <a style="margin-right: 5px; float:left;" class="btn btn-info btn-xs" href="/book/<%= data[i]._id %>/edit">修改</a>
                    <form style="display:inline-block" action="/book/<%= data[i]._id %>/delete" method="post">
                        <button class="btn btn-danger btn-xs del">删除</button>
                    </form>
                </td>
            </tr>
            <% } %>
        </tbody>
        </table>

        <nav aria-label="Page navigation">
            <ul class="pagination pull-right">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <% for(let i=1;i<=pages;i++){ %>
              <li class="<% if(i=== Number(page)){ %> active <% } %>"><a href="/book?page=<%= i %>"><%= i %></a></li>
              <% } %>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
        </nav>
</div>
<script>
    //获取所有的删除按钮
    let dels = document.querySelectorAll('.del');
    //绑定事件
    dels.forEach(item => {
        item.onclick = function(e){
            if(!confirm('您确定要删除当前数据么??')){
                //阻止表单提交
                e.preventDefault();
            }
        }
    });

</script>
<%- include('../layout/footer') %>        